<template>
  <!--用于绘制左边图标的图标-->
  <div class="render-icon-com">
    <div
      v-for="(item, index) in timeLineArr"
      :key="item.id"
      class="com-icon"
      :class="{ fatherStyle: Boolean(item.childrenElList.length) }"
    >
      <icon-com
        class="icon-self"
        :time-line-item="item"
        type="father"
        :playing="playing"
        @clickIcon="handleIcon"
      ></icon-com>
      <div v-show="item.iconDisable.contract === 1" class="com-children">
        <div v-for="(item1, index1) in item.childrenElList" :key="index1" class="com-children-item">
          <icon-com
            v-if="judgeChildrenShowNormal(item1)"
            :time-line-item="item1"
            type="children"
            :playing="playing"
            class="icon-children-normal"
            @clickIcon="handleIcon"
          ></icon-com>
          <div v-else class="icon-children-other">
            <div v-if="item1.name === 'doubleDrive'" class="icon-double-drive">
              <div class="icon-double-drive-cover">
                <img :src="item1.avatarUrl" alt="" />
              </div>
              <div class="icon-double-drive-name">
                <span class="name">{{ item1.vtuberName }}</span>
                <span class="desc">({{ item1.channel === 0 ? '左侧' : '右侧' }})</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import IconCom from '@veditor/components/timeLine/components/iconCom.vue';
const ZERO = 0;
const ONE = 1;
const TWO = 2;
export default {
  name: 'RenderIcon',
  components: {
    IconCom,
  },
  props: {
    timeLineArr: {
      required: true,
      type: Array,
    },
    playing: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    // 用于处理icon点击
    handleIcon(item, type) {
      const PLAYING_DIS_LIST = ['show', 'sound', 'selectable'];
      if (this.playing && PLAYING_DIS_LIST.indexOf(type) !== -1) {
        return;
      }
      if (type !== 'icon') {
        const value = item.iconDisable[type];
        if (value === ZERO) {
          return false;
        }
        if (value === ONE) {
          item.iconDisable[type] = TWO;
        } else {
          item.iconDisable[type] = ONE;
        }
      }
      item.clickIcon(item, type);
    },
    // 用于判断展示normal还是other
    judgeChildrenShowNormal(timelineItem) {
      const { showOtherIcon } = timelineItem;
      return !showOtherIcon;
    },
  },
};
</script>

<style lang="stylus" scoped>
.render-icon-com
  display flex
  flex-direction column
  align-items flex-start
  padding 0 16px 0 0
  width 160px
  .com-icon
    display flex
    flex-direction column
.com-children
  margin-bottom 6px
.com-children-item
  height 30px
.icon-double-drive
  display flex
  height 100%
  align-items center
.icon-double-drive-cover
  width 24px
  height 24px
  border-radius 50%
  margin-right 16px
  overflow hidden
  img
    width 100%
    height 100%
.icon-double-drive-name
  flex 1
  overflow hidden
  white-space nowrap
  text-overflow ellipsis
  font-size 12px
  font-weight 500
  width 1px
  .name
    color #FFFFFF
    margin-right 4px
  .desc
    color #9ba0a8
.fatherStyle
  border-top 2px solid transparent
  border-bottom 2px solid transparent
</style>
